<div class="form-group pull-right">
  <pfng-toast-notification-list [notifications]="notifications" (onCloseSelect)="handleCloseNotification($event)"
    [showClose]="true">
  </pfng-toast-notification-list>
</div>

<h1>
  APIs &amp; Services
  <div class="pull-right" >
    <button class="btn btn-default" (click)="openArtifactUploader()">
      <span class="fa fa-upload"></span> Upload
    </button>&nbsp;
    <button class="btn btn-primary" (click)="openCreateDirectAPI()">
      <span class="fa fa-plus"></span> Add Direct API
    </button>
  </div>
</h1>
<small> These are the APIs | Services managed by Microcks. You can discover new ones adding Import Job, creating a new
  Direct API or uploading a specification...</small>

<div class="container-fluid">
  <div id="pf-list-standard" class="list-group list-view-pf list-view-pf-view">
    <div class="toolbar-pf">
      <div class="col-sm-12">
        <pfng-toolbar [config]="toolbarConfig" (onFilterChange)="handleFilter($event)"></pfng-toolbar>
      </div>
    </div>
    <div *ngFor="let service of services" class="list-group-item">
      <div class="list-view-pf-main-info" (mouseenter)="selectService(service)">
        <div class="list-view-pf-left">

          <span class="fa list-view-pf-icon-sm" [class.fa-code]="service.type === 'SOAP_HTTP'"
            [class.soap-icon-sm]="service.type === 'SOAP_HTTP'"
            [class.pficon-plugged]="service.type === 'REST' || service.type === 'GENERIC_REST'"
            [class.rest-icon-sm]="service.type === 'REST'"
            [class.fa-bolt]="service.type === 'EVENT' || service.type === 'GENERIC_EVENT'"
            [class.event-icon-sm]="service.type === 'EVENT'"
            [class.generic-icon-sm]="service.type === 'GENERIC_REST' || service.type === 'GENERIC_EVENT'"
            [class.pficon-connected]="service.type === 'GRPC'" [class.grpc-icon-sm]="service.type === 'GRPC'"
            [class.pficon-topology]="service.type === 'GRAPHQL'"
            [class.graph-icon-sm]="service.type === 'GRAPHQL'"></span>
        </div>
        <div class="list-view-pf-body">
          <div class="list-view-pf-description">
            <div class="list-group-item-heading serviceName">
              <h4><a routerLink="{{service.id}}">{{ service.name }}</a></h4>
            </div>
            <div class="list-group-item-text serviceMetadata">
              <span class="label label-primary" *ngIf="service.type === 'SOAP_HTTP'">SOAP</span>
              <span class="label label-success" *ngIf="service.type === 'REST'">REST</span>
              <span class="label label-warning" *ngIf="service.type === 'EVENT'">EVENT</span>
              <span class="label label-grpc" *ngIf="service.type === 'GRPC'">GRPC</span>
              <span class="label label-graph" *ngIf="service.type === 'GRAPHQL'">GRAPH</span>
              <span class="label label-gene" *ngIf="service.type === 'GENERIC_REST'">DIRECT</span>
              <span class="label label-gene" *ngIf="service.type === 'GENERIC_EVENT'">DIRECT</span>
              | Version <b>{{ service.version }}</b>
              | <app-label-list [metadata]="service.metadata"
                [filter]="repositoryFilterFeatureLabelList()"></app-label-list>
              <br />
              <div style="margin-top: 10px">
                <small *ngIf="service.metadata">Updated on {{ service.metadata.lastUpdate | date : 'medium' }}</small>
              </div>
            </div>
          </div>
          <div class="list-view-pf-additional-info">
            <div class="list-view-pf-additional-info-item" [tooltip]="operationsTemplate" placement="bottom">
              <span class="fa fa-cog"></span>
              <strong>{{ service.operations.length }}</strong> Operations
            </div>
          </div>
        </div>

        <div class="list-view-pf-actions">
          <a routerLink="{{service.id}}"><button class="btn btn-default" type="button">Details</button></a>
          <div class="dropdown pull-right dropdown-kebab-pf" dropdown *ngIf="hasRole('admin') || hasRoleForService('manager', service)">
            <button id="dropdownKebabRight" class="btn btn-link dropdown-toggle" type="button" dropdownToggle aria-controls="dropdown-actions">
              <span class="fa fa-ellipsis-v"></span>
            </button>
            <ul id="dropdown-actions" *dropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
              <!-- <li><a>Edit</a></li> -->
              <li><a (click)="confirmDeleteDialog.open(service)">Delete</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <ng-template #operationsTemplate>
    <h5>Operations</h5>
    <span [innerHtml]="html"></span>
  </ng-template>

  <pfng-pagination [config]="paginationConfig" (onPageNumberChange)="handlePageNumber($event)"
    (onPageSizeChange)="handlePageSize($event)">
  </pfng-pagination>
</div>


<app-confirm-delete-dialog #confirmDeleteDialog (delete)="deleteService($event)">
  <p>Do you really want to delete the selected API or Service ?</p>

  <div class="alert alert-danger">
    <span class="pficon pficon-error-circle-o"></span>
    <strong>NOTE : </strong>
    <span>This will <strong>permanently</strong> delete the API or Service definition from Microcks as well as all the
      Test results. This operation cannot be undone.</span>
  </div>
</app-confirm-delete-dialog>
